<template>
  <el-table-column v-bind="$attrs" v-on="$listeners">
    <template #default="scope">
      <slot name="defalut" v-bind="scope" v-if="!editorIndex[scope.$index]">
        <span @click="handleClick(scope)" style="cursor: pointer">{{ scope.row[scope.column.property] }}</span>
      </slot>
      <slot name="editor" v-bind="scope" v-else>
        <component :is="editorComponent"  v-bind="$attrs" v-model="scope.row[scope.column.property]"></component>
      </slot>
    </template>
  </el-table-column>
</template>
<script>
import {createPromiseDialog} from '@/utils/createPromiseDialog'
import ElementUI from 'element-ui'

export default {
  name: 'TableEditorColumnComp',
  inject: ['editorIndex'],
  props: ['targetComp'],
  data(){
    return {
      editorComponent: ElementUI.Input
    }
  },
  methods: {
    async handleClick(scope) {
      
      if(!this.targetComp) return;
      try{
        const dialogComp = createPromiseDialog(this.targetComp)
        await dialogComp({title: `${scope.row.objectName}的信息`})
      }catch(e){
        console.log(e)
      }
    }
  }
  
}
</script>